import dash
from dash import html, dcc, dash_table
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd
import numpy as np
from datetime import datetime, date
from flask import session # 确保导入 session
from models import Organization, Department, Product as Equipment # 确保导入 Equipment
from sqlalchemy import func # 确保导入 func

from .charts1 import *
from .charts2 import *




# 将 layout 改为函数
def get_layout():
    return html.Div([
        # 顶部标题栏
        create_header_panel(),
        
        # 主要内容区域 - 2行3列网格
        html.Div([
            # 上半部分（第一行）- 保持1:1:1布局不变
            html.Div([
                # 第一列：资产分布
                html.Div([
                    create_asset_distribution_panel()
                ], style={
                    "width": "33.33%",
                    "height": "100%",
                    "padding": "10px",
                    "boxSizing": "border-box"
                }),
                
                # 第二列：设备运维
                html.Div([
                    create_equipment_operation_panel()
                ], style={
                    "width": "33.33%",
                    "height": "100%",
                    "padding": "10px",
                    "boxSizing": "border-box"
                }),
                
                # 第三列：维修商
                html.Div([
                    create_repair_provider_panel_layout()
                ], id='branch-repair-provider-panel', style={
                    "width": "33.33%",
                    "height": "100%",
                    "padding": "10px",
                    "boxSizing": "border-box"
                })
            ], style={
                "display": "flex",
                "height": "44%", 
                "width": "100%"
            }),
            
            # 下半部分（第二行）- 1.31:5.36:3.33布局
            html.Div([
                # 第一列：设备类型
                html.Div([
                    create_equipment_type_filter_panel()
                ], style={
                    "width": "13.1%",
                    "height": "100%",
                    "padding": "10px",
                    "boxSizing": "border-box"
                }),
                
                # 第二列：全院设备综合分析
                html.Div([
                    create_equipment_analysis_panel()
                ], style={
                    "width": "53.6%",
                    "height": "100%",
                    "padding": "10px",
                    "boxSizing": "border-box",
                    "display": "flex",  # 添加flex布局
                    "flexDirection": "column"  # 确保子元素填充高度
                }),
                
                # 第三列：明细预览
                html.Div([
                    create_detail_preview_panel()
                ], style={
                    "width": "33.3%",
                    "height": "100%",
                    "padding": "10px",
                    "boxSizing": "border-box"
                })
            ], style={
                "display": "flex",
                "height": "56%",  
                "width": "100%"
            })
        ], style={
            "height": "calc(100vh - 140px)",  # 减去顶部和底部的高度
            "backgroundColor": "#111",
            "display": "flex",
            "flexDirection": "column"
        }),
        
        # 底部状态栏
        create_bottom_status_bar()
    ], style={
        "backgroundColor": "#111",
        "height": "100vh",
        "margin": "0",
        "padding": "0",
        "overflow": "hidden",
        "fontFamily": "Arial, sans-serif"
    })

# 为了保持兼容性，保留 layout 变量但设为 None
layout = None